<template>
    <div class="user" ref="user">
      <div class="user-cantainer">
        <div class="top">
          <!--登录状态-->
          <div class="isLogin" v-if="isLogin">
            <div class="btn-msg" @click="$router.push('/message')">
              <div class="caution" v-show="messageStatus===2"></div>
            </div>
            <div class="content">
              <div class="left">
                <div class="img-box">
                  <img :src="avatar" alt="" width="100%" height="100%">
                </div>
              </div>
              <div class="right" @click="$router.push({path:'/modifyUserName',query:{name:name}})">
                <p class="name">{{name}}</p>
                <p class="tel">{{tel|_coverWithMosaicsToTelNum}}</p>
              </div>
            </div>
          </div>
          <!--非登录状态-->
          <div class="noLogin" v-if="!isLogin">
            <div class="btn-msg" @click="$router.push('/message')"></div>
            <div class="login" @click="$router.push('/login')">注册/登录</div>
          </div>
        </div>
        <div class="center">
          <div class="item" @click="$router.push('/movieTicket')">
            <div class="icon dyp"></div>
            <div class="text">电影票</div>
          </div>
          <div class="item" @click="$router.push('/wantToSee')">
            <div class="icon wxk"></div>
            <div class="text">我想看</div>
          </div>
          <div class="item " @click="$router.push('/myCoupons')">
            <div class="icon yhj"></div>
            <div class="text">优惠券</div>
          </div>
          <div class="item " @click="$router.push('/membershipCard')">
            <div class="icon hyk"></div>
            <div class="text">会员卡</div>
          </div>
        </div>
        <div class="bottom">
          <div class="item" @click="$router.push('/cinemaCollect')">
            <div class="left" >收藏影院</div>
            <div class="right">{{collectCinemaNum?collectCinemaNum:''}}</div>
          </div>
          <div class="item" @click="$router.push('/saw')">
            <div class="left">我的已看</div>
            <div class="right">{{commentStatusDesc}}</div>
          </div>
          <div class="item" @click="$router.push('/feedback')">
            <div class="left">意见反馈</div>
            <div class="right"></div>
          </div>
          <div class="item" @click="$router.push('/setting')">
            <div class="left" >设置</div>
            <div class="right"></div>
          </div>
          <div class="item" @click="$router.push('/about')">
            <div class="left">关于我们</div>
            <div class="right"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {getStorage} from "../../../common/js/localStorage";
    import {Toast} from 'mint-ui'
    import {coverWithMosaicsToTelNum} from "../../../common/js/filter"
    import global from '../../../common/js/global'

    export default {
        name: "user",
        data(){
          return{
            isLogin:false,
            messageStatus:'',
            collectCinemaNum:0,
            commentStatusDesc:'',
            avatar:'',
            tel:'',
            name:''
          }
        },
        mounted(){
          this._getUserInfo()
          this.avatar = getStorage('userInfo').userInfo.headPicUrl
          this.tel = getStorage('userInfo').userInfo.phone
          this.name = getStorage('userName')
          if(getStorage('userInfo').JSESSIONID){
            this.isLogin = true
          }
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['user'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
        },
        methods:{
          _getUserInfo(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/myInfo',
                data:{

                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.messageStatus = data.messageStatus
                  this.collectCinemaNum = data.collectCinemaNum
                  this.commentStatusDesc = data.commentStatusDesc
                }else {
                  // Toast(res.data.errorMsg)
                  this.isLogin = false
                }
              }else {
                Toast('服务器错误，错误代码:'+res.data.status)
              }

            })
          }
        },
        filters:{
          //手机号打码
          _coverWithMosaicsToTelNum(tel){
            return coverWithMosaicsToTelNum(tel)
          }
        }
    }
</script>

<style scoped lang="stylus">
  .user
    height 100%
    user-select none
    .top
      position relative
      height 130px
      padding-top 12px
      background #171718
      margin-bottom 10px
      .isLogin
        position relative
        height 100%
        .btn-msg
          position absolute
          right 10px
          width 26px
          height 24px
          background url("msg.svg") no-repeat center/100% 100%
          .caution
            height 6px
            width 6px
            background #EEAC21
            border-radius 3px
        .content
          position relative
          display flex
          top 38px
          text-align left
          line-height 54px
          height 54px
          color #ffffff
          font-size 16px
          background url("avatar.svg")no-repeat 10px center /54px 54px
          .left
            flex 0 0 78px
            .img-box
              height 54px
              width 54px
              margin-left 10px
              overflow hidden
              border-radius 27px
          .right
            flex 1
            font-size 16px
            .name
              padding-top 6px
              width 120px
              height 22px
              line-height 22px
              overflow hidden
            .tel
              height 22px
              width 120px
              line-height 22px
              font-size 14px
              overflow hidden
              padding-top 3px

      .noLogin
        height 100%
        text-align center
        .btn-msg
          position absolute
          right 10px
          width 26px
          height 24px
          background url("msg.svg") no-repeat center/100% 100%
        .login
          position relative
          top 49px
          width 92px
          height 32px
          color #F9C40D
          font-size 16px
          border-radius 4px
          border 1px solid #F9C40D
          line-height 32px
          text-align center
          margin 0 auto
          &:active
            color #ffffff
            background #F9C40D
    .center
      display flex
      height 90px
      background #171718
      margin-bottom 10px
      .item
        flex 1
        &:active
          background #2e2f31
        .icon
          height 26px
          margin-bottom 4px
          margin-top 22px
          &.dyp
            background url("icon_dyp.svg")no-repeat center /26px 26px
          &.wxk
            background url("icon_wxk.svg")no-repeat center /24px 26px
          &.yhj
            background url("icon_yhj.svg")no-repeat center /32px 22px
          &.hyk
            background url("icon_hyk.png")no-repeat center /25px 22px
        .text
          height 17px
          color #ACB1BB
          font-size 12px
          text-align center
    .bottom
      height 260px
      background #171718
      .item
        display flex
        height 52px
        &:active
          background #2e2f31
        .left
          flex  0 0 120px
          font-size 16px
          color #ffffff
          line-height 52px
          padding-left 10px
          text-align left
        .right
          flex 1
          color #F7C20F
          line-height 52px
          padding-right 34px
          font-size 14px
          text-align right
          background url("arrow_right.svg") no-repeat calc(100% - 14px) center/9px 17px
</style>
